<template>
  <div class="audition219">
    <p>前端：</p>
    <p>根据后台接口发送请求，图片作为参数，需要带上一个 name 字段</p>
    <p>后端：</p>
    <p>通过 multer 创建一个临时空间用来接收并存储前端发送过来的二进制图片数据。</p>
    <p>通过 fs 模块读取临时空间的数据，并使用 pipe 方法注入到 fs 模块创建 path 模块指向的服务器文件夹下</p>
    <p>后端express实现代码：</p>
    <v-md-preview :text="text1" />
  </div>
</template>

<script>
const prefix = '``` js'
const suffix = '```'
export default {
  name: 'Audition219',
  data() {
    return {
      text1: `${prefix}
      var express = require('express')
      var router = express.Router()
      var fs = require('fs')
      var path = require('path')
      /* 用于处理非表单的文件数据流 */
      var multer = require('multer')
      // 配置数据流向的文件,绝对路径，相对于根目录
      var upload = multer({ dest: 'upload/' })
      // 创建一个接收为编码的二进制数据流的方法实例 接收 name 为 newimg 字段的上传文件，最大接收为 1
      var cpUpload = upload.fields([{ name: 'newimg', maxCount: 1 }])

      // 接口
      router.post('/add', cpUpload, (req, res) => {
        // 前端发送请求后，服务器已经接受到了前端传递过来的图片数据，保存在 files 对象下
        // 加上 cpUpload，数据就会从这个方法所设置的地址流过来，生成一个本地临时空间，类似于虚拟 DOM
        // 获取这段数据
        var img = req.files.newimg[0]

        // fs 模块读取临时空间的数据
        var readStream = fs.createReadStream(img.path)
        // 设置图片存入的路径，并给文件名前面加上一个时间轴，防止命名重复
        var imgpath = '/cdn/' + Date.now() + '-' + img.originalname
        // 创建一个写入图片数据的地址
        var writeStram = fs.createWriteStream(
          path.resolve(__dirname, '../public' + imgpath)
        )
        // 设置一个 pipe 管道，将读取的数据解析并注入到写入地址
        readStream.pipe(writeStram)
        // 监听注入地址的 close 事件，表示注入完毕
        writeStram.on('close', () => {
          // 返回给前端一个图片地址
          res.json({ err: 0, msg: 'success', data: { img: imgpath } })
        })
      })
      module.exports = router
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>